<template>
	<view class="" style="width: 100%;min-height: 100vh;">
		<cu-custom :isBack="true" :bgColor="'var(--primaryBg)'">
			<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
				发放服务
			</view>
		</cu-custom>
		<view class="box">
			<view class="head" style="margin-bottom: 1000rpx;">
				<view class="grow-record">
					<view class="form-box">
						<view v-if="isShow" class="form-item" >
							<view class="left">
								选择类型
							</view>
							<view class="right">
								<view class="type-list">
									<view @click="typeClick(item,index)" :class="{active:typeIndex == index}"
										class="type-item" v-for="(item,index) in typeList" :key="index">
										{{item.name}}
									</view>
								</view>
							</view>
						</view>

						<view v-if="isShow" class="form-item">
							<view class="left">
								选择服务
							</view>
							<!-- 我的 -->
							<picker v-if="!typeIndex" @change="pickerChange" :value="serviceIndex" range-key="name" :range="myOptions">
								<view class="right flex align-center">
									<view :style="serviceIndex!=-1?'color:#333':''" class="name">
										{{serviceIndex!=-1?`${myOptions[serviceIndex].name}`:'请选择'}} 
									</view>
									<view class="lg text-gray cuIcon-right">

									</view>
								</view>
							</picker>
							<!-- 其他的 -->
							<picker v-else @change="pickerChange" :value="serviceIndex" range-key="name" :range="otherOptions">
								<view class="right flex align-center">
									<view :style="serviceIndex!=-1?'color:#333':''" class="name">
										{{serviceIndex!=-1?`${otherOptions[serviceIndex].name}`:'请选择'}}
									</view>
									<view class="lg text-gray cuIcon-right">

									</view>
								</view>
							</picker>
						</view>

						<view class="form-item">
							<view class="left">
								选择开始有效期
							</view>
							<view class="right flex align-center">
								<uni-datetime-picker v-model="form.startTime" @change="handleDate" :start="startBefore()" type="date">
									<view class="flex align-center" v-if='!form.startTime'>
										<text class='name'>请选择开始有效期</text>
										<i class="lg text-gray cuIcon-right"></i>
									</view>
									<text v-else>{{form.startTime}}</text>
								</uni-datetime-picker>
							</view>
						</view>
						
						<view class="form-item">
							<view class="left">
								选择结束有效期
							</view>
							<view class="right flex align-center">
								<uni-datetime-picker v-model="form.endTime" @change="handleDate" :start="startBefore()" type="date">
									<view class="flex align-center" v-if='!form.endTime'>
										<text class='name'>请选择结束有效期</text>
										<i class="lg text-gray cuIcon-right"></i>
									</view>
									<text v-else>{{form.endTime}}</text>
								</uni-datetime-picker>
							</view>
						</view>

						<view class="form-item">
							<view class="left">
								可使用次数
							</view>
							<view class="right flex align-center">
								<view class="">
									<input v-model="form.total" type="number" placeholder="请输入" />
								</view>
								<view class="" style="margin-left: 24rpx;">
									次
								</view>
							</view>
						</view>

						<view class="form-item">
							<view class="left">
								选择客户
							</view>
							<view class="right flex align-center"
								@click="toPage('/pagesPet/pages/service/saler/serve/select-client')">
								<view class="">
									已选择: {{list.length}}
								</view>
								<view class="lg text-gray cuIcon-right">

								</view>
							</view>
						</view>


					</view>

				</view>


				<view class="" style="height: 300rpx;">
				</view>
			</view>

		</view>


		<view @click="handleSumbit" class="bottom-box">
			确认发布
		</view>



	</view>
</template>

<script>
	import util from "@/common/util.js"
	import {
		getOtherGrantService,
		getMyGrantService,
		addGrantService
	} from "@/api/pet/service/saler.js"
	import {
		getEnumList
	} from "@/api/pet/index/saler.js"
	export default {
		components: {},
		data() {
			return {
				form: {},
				typeIndex: 0,
				scrollTop: 0,
				CustomBar: this.CustomBar,
				typeList: [{
					name: '我的服务',
					type:'USER'
				}, {
					name: '其他服务商',
					type:'USER'
				}],
				serviceIndex:-1,
				otherOptions: [], //其他服务商服务列表
				myOptions: [], //我的服务服务列表
				options: [],
				pet_team: {},
				list:[],
				item:{},
				pId:'', //其他服务商发放用
				isShow:true
			}
		},
		onLoad(e) {
			this.reg()
			if(e.item){
				let item = JSON.parse(decodeURIComponent(e.item))
				this.item = item.data
				this.form.type = item.type
				this.pId = item.pId?item.pId:''
				this.isShow = false
				console.log(this.item)
			}
			// this.getEnumList()
			this.pet_team = uni.getStorageSync('pet_team')
			this.getOtherGrantService()
			this.getMyGrantService()
		},
		methods: {
			getOtherGrantService() {
				getOtherGrantService({
					bizId: this.pet_team.teamId,
					type: 'MCH',
					iStatus: 0
				}).then(res => {
					this.otherOptions = res
				})
			},
			getMyGrantService() {
				getMyGrantService({
					teamId: this.pet_team.teamId,
					status: 0
				}).then(res => {
					this.myOptions = res
				})
			},
			startBefore(type) {
				return util.getdate()
			},
			pickerChange(e){
				this.serviceIndex = Number(e.detail.value)
			},
			handleDate(e){
				console.log(this.form)
				
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			typeClick(item, index) {
				if(this.typeIndex != index){
					this.typeIndex = index
					this.serviceIndex= -1
					this.form.type = item.type
				}
			},
			handleTab(index) {
				this.tabIndex = index
			},
			submitCustomer(list){
				this.list = JSON.parse(JSON.stringify(list)) 
			},
			handleSumbit(){
				console.log(this.form)
				if(this.isShow && this.serviceIndex == -1){
					return uni.showToast({
						title:'请选择服务',
						icon:'none'
					})
				}
				if(!this.form.startTime){
					return uni.showToast({
						title:'请选择开始有效期',
						icon:'none'
					})
				}
				if(!this.form.endTime){
					return uni.showToast({
						title:'请选择结束有效期',
						icon:'none'
					})
				}
				
				if(+new Date(this.form.startTime) > +new Date(this.form.endTime)){
					return uni.showToast({
						title:'结束时间要大于开始时间',
						icon:'none'
					})
				}
				
				if(!this.form.total){
					return uni.showToast({
						title:'请填写正确的使用次数',
						icon:'none'
					})
				}
				if(this.item.id && this.form.total>this.item.unusedNum+1){
					return uni.showToast({
						title:'请填写正确的使用次数',
						icon:'none'
					})
				}
				if(!this.list.length){
					return uni.showToast({
						title:'请选择客户',
						icon:'none'
					})
				}
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let bizList = []
				for (let i = 0; i < this.list.length; i++) {
					bizList.push({
						bizId:this.list[i].userId,
						bizName:this.list[i].name,
						telphone:this.list[i].telphone
					})
				}
				let serveId = ''
				if(this.isShow){
					serveId = !this.typeIndex?this.myOptions[this.serviceIndex].id:this.otherOptions[this.serviceIndex].id
				}
				let obj = {
					serveId:this.isShow? serveId:this.item.id,
					teamId:this.pet_team.teamId,
					teamName:this.pet_team.teamName,
					type:this.form.type,
					startTime:this.form.startTime,
					endTime:this.form.endTime,
					total:this.form.total,
					bizs:bizList,
					pid:this.pId?this.pId:this.typeIndex?this.otherOptions[this.serviceIndex].issueId:undefined,
				}
				addGrantService(obj).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					uni.navigateBack()
				})
				
			},
			reg(){
				this.form = {
					startTime:"",
					endTime:"",
					type:'USER',
					total:0,
				}
			},
		},
	}
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.type-list {
		display: flex;
		align-items: center;

		.type-item {
			padding: 0 10rpx;
			height: 64rpx;
			background: #F5F5F5;
			border-radius: 8rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: var(--h1Color);
			line-height: 37rpx;
			text-align: center;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 12rpx;

			&.active {
				background: var(--primaryBg);
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color:var(--btnColor);
			}
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 46rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 686rpx;
		height: 96rpx;
		background: var(--primaryBg);
		border-radius: 48rpx;

		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: var(--h1Color);
		line-height: 45rpx;
		text-align: center;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.grow-record {
		padding: 0 24rpx;
		margin: 16rpx;
		width: 718rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

		.form-box {
			// padding-bottom: 40rpx;
			// margin-bottom: 40rpx;

			.form-item {
				border-bottom: 1rpx solid #EEEEEE;
				display: flex;
				align-items: center;
				justify-content: center;
				justify-content: space-between;
				height: 144rpx;

				&:last-child {
					border-bottom: 0;
				}

				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color:var(--h1Color);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
				}

				.right {

					input {
						width: 200rpx;
						height: 80rpx;
						background: #F8F8F8;
						border-radius: 8rpx;

						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						text-align: center;
						font-style: normal;

					}

					.name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: var(--h4Color);
						line-height: 42rpx;
						text-align: right;
						font-style: normal;
					}
				}
			}
		}
	}

	.box {
		width: 100%;
		display: flex;
		flex-direction: column;

		.head {
			width: 100%;
			padding: 12rpx 0 58rpx;
			height: 376rpx;
			display: flex;
			background: linear-gradient(180deg, var(--primaryBg) 0%, rgba(255, 227, 89, 0) 100%);
			display: flex;
			flex-direction: column;


			.title-cont {
				width: 100%;
				margin-top: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: var(--h1Color);
					line-height: 56rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}



	}
</style>